<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>申请单提交</title>
    <style>
        :root {
            --bgc: #7b4f33;
        }
        html, body, h1, h2, h3, h4, h5, h6{
            margin: 0;
            padding: 0;
            outline: none;
            border: 0;
        }
        /* 原子化 */
        .flex-between{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .mb15{
            margin-bottom: 15px;
        }
        .mb22{
            margin-bottom: 22px;
        }
        .grade{
            color: #8f8f8f;
        }

        /* 加的边距 */
        #order{
            padding: 20px;
        }

        /* 页面样式 */
        .toolbar{
            /* border: 1px solid #d7d7d7; */
            
        }
        .toolbar-header{
            padding: 10px;
            color: #fff;
            background-color: var(--bgc);
        }
        .toolbar-content{
            padding: 15px;
            border-left: 1px solid #d7d7d7;
            border-right: 1px solid #d7d7d7;
            border-bottom: 1px solid #d7d7d7;
        }
        .toolbar-content-explain{
            display: flex;
            justify-content: flex-start;
            box-sizing: border-box;
        }
        .toolbar-content-explain span{
            white-space: nowrap;
            display: block;
            padding-right: 10px;
        }
        .toolbar-content-explain div{
            display: block;
            width: 100%;
            color: #868686;
        }

        .toolbar-content-border{
            padding: 10px;
            border: 1px solid #b5b8be;
        }

        /* 组件样式修改 */
        .el-col{
            margin-bottom: 22px;

        }
        .el-button--primary{
            color: #FFF;
            background-color: var(--bgc);
            border-color: var(--bgc);
        }
        .el-button--primary:focus, .el-button--primary:hover {
            color: #FFF;
            background-color: #7b4f3399;
            border-color: #7b4f3399;
        }
        .el-button--text{
            color: var(--bgc);
        }
        .el-button--text:focus, .el-button--text:hover{
            color: #7b4f3399;
        }
        .el-button--primary.is-disabled, .el-button--primary.is-disabled:hover{
            background-color: #7b4f335b;
            border-color: #7b4f335b;
        }
        /* 表格去除边距 */
        .eliminate{
            padding: 0 !important;
        }
        .eliminate .cell{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            padding: 0 !important;
        }
        .eliminate-table{
            display: flex;
            align-items: center;
            width: 100%;
            height: 48px;
            padding: 5px 8px;
        }
        .eliminate-table+.eliminate-table{
            border-top: 1px solid #EBEEF5;
        }

        .formLable .el-form-item{
            margin: 0;
        }
        .formLable .el-form-item__content{
            margin: 10px !important;
        }
        .el-form-item__error{
            position: initial;
        }
        .textarea{
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="order">
        <div class="toolbar">
            <div class="toolbar-header">新增特单申请</div>
            <div class="toolbar-content  flex-between">
                <div></div>
                <div>
                    <el-button :disabled="examineState">取消</el-button>
                    <el-button type="primary" :disabled="examineState" @click="saveForm(0)">保存</el-button>
                    <el-button type="primary" :disabled="examineState" @click="saveForm(1)">提交</el-button>
                </div>
            </div>
        </div>

        <div class="toolbar">
            <div class="toolbar-header">客户信息</div>
            <div class="toolbar-content">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="toolbar-content-explain">
                            <span>加盟商信息</span>
                            <div>{{ upForm.acceptDate }}</div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="toolbar-content-explain">
                            <span>申请人信息</span>
                            <div>{{ upForm.applicant }} {{ upForm.applicantMobile }}</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="toolbar">
            <div class="toolbar-header">申请信息</div>
            <div class="toolbar-content">
                <el-form ref="form" :rules="rules" :model="upForm" label-width="auto">
                    <el-form-item label="申请单编号">
                        {{  upForm.orderNum }}
                    </el-form-item>

                    <el-form-item label="单据简介说明" prop="explain">
                        <el-input
                            :disabled="examineState"
                            type="textarea"
                            placeholder="请输入简介说明"
                            v-model="upForm.explain"
                            maxlength="30"
                            show-word-limit
                            >
                        </el-input>
                    </el-form-item>

                    <!-- 添加评审 -->
                    <el-form-item label="评审事项" prop="reviewList">
                        <!-- reviewList -->
                        <el-button type="primary" :disabled="examineState" @click="addReviewList">添加评审信息</el-button>
                    </el-form-item>

                    <template v-if="upForm.reviewList.length">
                        <el-table :data="upForm.reviewList" border style="width: 100%;margin-bottom: 20px;">
                            <el-table-column
                                fixed
                                label="事项类型"
                                class-name="formLable"
                                width="210"
                                header-align="center" align="center" >
                                <template  slot-scope="{row, $index}">
                                    
                                    <el-form-item :prop="`reviewList[${$index}].reviewType`" :rules="rules['reviewType']">
                                        <el-select v-model="row.reviewType" @change="(e) => changeListIndex(e, row, $index)" placeholder="请选择">
                                            <el-option
                                                :disabled="examineState"
                                                v-for="item in typeData"
                                                :key="item.id"
                                                :label="item.label"
                                                :value="item.id"
                                                :disabled="item.disabled">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    
                                </template>
                            </el-table-column>

                            <el-table-column
                                fixed
                                label="内容描述"
                                min-width="150"
                                header-align="center" align="center" >
                                <template  slot-scope="{row, $index}">
                                    <el-input
                                        :disabled="examineState"
                                        type="textarea"
                                        placeholder="请输入描述"
                                        v-model="row.reviewExplain"
                                        maxlength="30"
                                        show-word-limit
                                        >
                                    </el-input>
                                </template>
                            </el-table-column>

                            <el-table-column
                                fixed
                                class-name="eliminate"
                                label="事项分类"
                                width="190"
                                header-align="center" align="center" >
                                <template  slot-scope="{row, $index}">
                                    <div class="eliminate-table" v-for="(check, key) in row.list">
                                        <el-checkbox :disabled="examineState" v-model="row.list[key].checkState">{{ check.typeNmae }}</el-checkbox>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column
                                fixed
                                class-name="eliminate"
                                label="分类说明"
                                min-width="150"
                                header-align="center" align="center" >
                                <template slot-scope="{row, $index}">
                                    <div class="eliminate-table" v-for="(input, key) in row.list">
                                        <el-input :disabled="examineState" v-model="input.typeExplain" size="mini" placeholder="请输入说明内容"></el-input>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column
                                fixed
                                label="操作"
                                width="100"
                                header-align="center" align="center" >
                                <template  slot-scope="{row, $index}">
                                    <el-button :disabled="examineState" type="text" @click="removeList($index, 'reviewList')">删除</el-button>
                                </template>
                            </el-table-column>
                    </template>

                    <!-- 文件上传 -->
                    <el-form-item label="文件上传">
                        <!-- reviewList -->
                        <el-button type="primary" :disabled="examineState" @click="upFile">上传文件</el-button> 
                        <span class="grade">*若内容表述难以详尽时，申报部门可根据实际附内容描述附件，以作明释；</span>
                    </el-form-item>

                    <template v-if="upForm.fileList.length">
                        <el-table :data="upForm.fileList" border style="width: 100%;margin-bottom: 20px;">
                            <el-table-column
                                fixed
                                prop="fileName"
                                label="附件名称"
                                min-width="210"
                                header-align="center" align="center" >
                            </el-table-column>
                            <el-table-column
                                fixed
                                prop="fileType"
                                label="附件类型"
                                min-width="210"
                                header-align="center" align="center" >
                            </el-table-column>
                            <el-table-column
                                fixed
                                label="操作"
                                width="180"
                                header-align="center" align="center" >
                                <template  slot-scope="{row, $index}">
                                    <el-button type="text" @click="removeList($index, 'fileList')">删除</el-button>
                                    <el-button type="text" @click="downLoad">下载</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-form>
            </div>
        </div>
        
        <div class="toolbar">
            <div class="toolbar-header">受理回复信息</div>
            <div class="toolbar-content">
                <!-- treatmentState: 处理状态<h3>的key 3：待回复 4：已回复/驳回 5：已回复/通过 -->
                <template v-if="treatmentState >= '3'">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="toolbar-content-explain">
                                <span>受理时间</span>
                                <div>{{ upForm.treatmentDate }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="toolbar-content-explain">
                                <span>申请人信息</span>
                                <div>{{ upForm.acceptBy }} {{ upForm.acceptMobile }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </template>
                <template v-if="treatmentState >= '4'">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="toolbar-content-explain">
                                <span>受理时间</span>
                                <div>{{ upForm.recoverDate }}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="toolbar-content-explain">
                                <span>申请人信息</span>
                                <div>{{ upForm.recoverBy }} {{ upForm.recoverMobile }}</div>
                            </div>
                        </el-col>

                        <el-col :span="24" v-if="treatmentState === '4'">
                            <div class="toolbar-content-explain">
                                <span>驳回原因</span>
                                <div>{{ upForm.reasonsRefusal }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </template>
                <template v-if="treatmentState >= '5'">
                    <div class="mb22">
                        <div class="mb22">采购工程师</div>
                        <div class="toolbar-content-border">
                            <el-row :gutter="20">
                                <el-col :span="label.spanWidth || 8" v-for="(label, key) in purchasingAgent" :key="key">
                                    <div class="toolbar-content-explain">
                                        <span>{{ label.label }}</span>
                                        <div>{{ upForm[label.value] }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>

                    <div class="mb22">
                        <div class="mb22">工艺工程师</div>
                        <div class="toolbar-content-border">
                            <el-row :gutter="20">
                                <el-col :span="label.spanWidth || 8" v-for="(label, key) in processAgent" :key="key">
                                    <div class="toolbar-content-explain">
                                        <span>{{ label.label }}</span>
                                        <div>{{ upForm[label.value] }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            
                            <div>
                                <div class="mb22">图纸修改CAD附件</div>
                                <el-table :data="upForm.fileList" border style="width: 100%;">
                                    <el-table-column
                                        fixed
                                        prop="fileName"
                                        label="附件名称"
                                        min-width="210"
                                        header-align="center" align="center" >
                                    </el-table-column>
                                    <el-table-column
                                        fixed
                                        prop="fileType"
                                        label="附件类型"
                                        min-width="210"
                                        header-align="center" align="center" >
                                    </el-table-column>
                                    <el-table-column
                                        fixed
                                        label="操作"
                                        width="180"
                                        header-align="center" align="center" >
                                        <template  slot-scope="{row, $index}">
                                            <el-button type="text" @click="removeList($index, 'fileList')">删除</el-button>
                                            <el-button type="text" @click="downLoad">下载</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            
                        </div>
                    </div>

                    
                </template>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#order',
            data: {
                upForm: {
                    allianceBusiness: '子公司合肥-许帮顺【F901231】',
                    applicant: '周明海',
                    applicantMobile: '18898981242',
                    orderNum: 123456789,

                    // 待回复
                    acceptDate: '2024-07-18 12:00:00',
                    acceptBy: '周海媚',
                    acceptMobile: '13912345678',
                    // 已回复/驳回
                    recoverDate: '2024-07-18 12:00:00',
                    recoverBy: '周正宏',
                    recoverMobile: '15912345678',
                    reasonsRefusal: '驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因驳回原因',

                    // 采购工程师
                    purchaseSuggest: '采购工程师-采购建议',
                    // 工艺工程师
                    processSuggest: '工艺工程师-采购建议',

                    // 表单提交内容
                    explain: '',
                    // 评审集合
                    reviewList: [],
                    // 附件集合
                    fileList: []
                },
                // 采购工程师
                purchasingAgent: [
                    { label: '采购价', value: 'purchasePrice'},
                    { label: '出厂价', value: 'exitPrice'},
                    { label: '起订量', value: 'purchaseNumber'},
                    { label: '交付周期', value: 'handoverTime'},
                    { label: '下单厂家', value: 'orderingCompany'},
                    { label: '自制/外协', value: 'participationType'},
                    { label: '采购建议', value: 'purchaseSuggest', spanWidth: 24},
                ],
                // 工艺工程师
                processAgent: [
                    { label: '非标工艺费', value: 'costPrice'},
                    { label: '自制/外协', value: 'processType'},
                    { label: '采购建议', value: 'processSuggest', spanWidth: 24},
                ],
                examineState: false,
                rules: {
                    explain: [{ required: true, message: '请输入简介说明', trigger: 'blur' }],
                    reviewList: [ { required: true, message: '请添加评审信息', trigger: 'change' } ],
                    reviewType: [ { required: true, message: '请选择评审类型', trigger: 'change' } ]
                },
                // 下拉框
                typeData: [],
                // 受理状态（处理状态）
                treatmentState: '5'
            },
            mounted() {
                this.getTypeList()
            },
            methods: {
                getTypeList() {
                    // 接口获取的数据（模拟数据）
                    let arr = [
                        {
                            id: 1,
                            label: '工艺类',
                            list: [
                                { typeNmae: '特殊门型', typeId: 1 },
                                { typeNmae: '特殊结构', typeId: 2 },
                                { typeNmae: '尺寸非标、超高工艺', typeId: 3 },
                            ]
                        }, {
                            id: 2,
                            label: '材料类',
                            list: [
                                { typeNmae: '用量', typeId: 1 },
                                { typeNmae: '厚度', typeId: 2 },
                                { typeNmae: '尺寸', typeId: 3 },
                            ]
                        }, {
                            id: 3,
                            label: '调色类',
                            list: [
                                { typeNmae: '基材', typeId: 1 },
                                { typeNmae: '平板', typeId: 2 },
                                { typeNmae: '造型', typeId: 3 },
                                { typeNmae: '调色', typeId: 4 },
                                { typeNmae: '色卡提供', typeId:5 },
                                { typeNmae: '快递单号', typeId: 6 },
                            ]
                        }, {
                            id: 4,
                            label: '五金类',
                        }, {
                            id: 5,
                            label: '其他类别',
                        }
                    ]
                    // 添加禁止选中的状态
                    this.typeData = arr.map(item => {
                        return {
                            ...item,
                            disabled: false
                        }
                    })
                },
                addReviewList() {
                    console.log(this.upForm)
                    this.upForm.reviewList.push({
                        // id: 1,
                        reviewType: '',
                        reviewExplain: '',

                    })
                },
                // 处理下拉框选中唯一
                selectOnly() {
                    this.typeData.forEach( (sel, key) => {
                        let state = this.upForm.reviewList.some( tab => sel.id === tab.reviewType);
                        sel.disabled = state;
                    })
                },
                changeListIndex(e, row, index) {
                    let arr = this.typeData.find(item => item.id === e)?.list;
                    if(arr?.length) {
                        this.upForm.reviewList[index].list = 
                        arr = arr.map( item => {
                            return {
                                ...item,
                                checkState: false,
                                typeExplain: ''
                            }
                        });
                        // console.log(arr, this.upForm.reviewList[index].list)
                        this.upForm = JSON.parse(JSON.stringify(this.upForm))
                    } else {
                        this.upForm.reviewList[index].list = []
                    };
                    // 处理下拉框选中唯一
                    this.selectOnly();
                },

                removeList(index, name) {
                    this.upForm[name].splice(index, 1)
                },

                // 上传文件
                upFile() {
                    this.upForm.fileList.push({
                        fileName: '清单列表.xslx',
                        fileType: 'xslx',
                        fileUrl: 'http://baidu.com'
                    })
                },
                // 下载
                downLoad() {
                    
                },

                /**
                 * @parmes type
                 * @description 表单保存(保存没走校验) / 校验提交
                 * @param form
                 * @returns {object*}
                 * @description type: 1（提交） 0（保存）
                 * @param type
                 * @returns {number*}
                */
                saveForm(type) {
                    if(type) {
                        // 1： 提交
                        this.$refs['form'].validate((valid) => {
                            if (valid) {
                                console.log(this.upForm)
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    } else {
                        // 0： 保存
                        console.log(this.upForm)
                    }
                    
                }
            }
        })
    </script>
</body>
</html>